<template>
  <div class="bigbox">
    <div class="dingnav">
      <a href="javascript:;" @click="$router.go(-1)"
        ><van-icon name="arrow-left"
      /></a>
      <p>江南名庐</p>
      <a href="javascript:;"><van-icon name="share-o" /></a>
    </div>
    <!-- //房屋详情轮播 -->
    <div class="swipebox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
    <!-- 房屋信息 -->
    <div class="fangwuxinxi">
      <ul>
        <li>
          <div class="fistbox">
            <h4>整租 江南名庐 90 3000/月</h4>
            <div class="spanbox">近地铁</div>
          </div>
        </li>
        <li>
          <div class="twobox">
            <div class="rent">
              <div class="threeth">
                <h3>3000</h3>
                <span>/月</span>
              </div>
              <p>租金</p>
            </div>
            <div class="housetype">
              <div class="threeshi">
                <h3>三室</h3>
              </div>
              <p>租金</p>
            </div>
            <div class="area">
              <div class="meter">
                <h3>90平米</h3>
              </div>
              <p>面积</p>
            </div>
          </div>
        </li>
        <li>
          <div class="threebox">
            <div class="leftbox">
              <div class="one_top">
                <span>装修：</span>
                <p>精装</p>
              </div>
              <div class="one_bottom">
                <span>楼层：</span>
                <p>中楼层</p>
              </div>
            </div>
            <div class="rightbox">
              <div class="two_top">
                <span>朝向：</span>
                <p>精装</p>
              </div>
              <div class="two_bottom">
                <span>类型：</span>
                <p>普通住宅</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 地图消息 -->
    <div class="mapbox">
      <div class="top_homes">
        <span>小区：</span>
        <span>江南名庐</span>
      </div>
      <!-- 地图展示 -->
      <div class="bottom_map"></div>
    </div>
    <!-- 房屋配套 -->
    <div class="setup">
      <div class="h4_box">
        <h4>房屋配套</h4>
      </div>
      <div class="li_box">
        <ul>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
          <li>
            <van-icon name="cashier-o" size="22px" color="#999999" />
            <span>电视机</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 房源概况 -->
    <div class="survey">
      <div class="h4_box">
        <h4>房源概况</h4>
      </div>
      <div class="wangbox">
        <div class="nvshi">
          <div class="imgbox">
            <img src="" alt="" />
          </div>
          <div class="nvb">
            <span class="span_text_one">王女士</span>
            <div class="renzgeng">
              <van-icon name="shield-o" color="#f36273" />
              <span class="span_text">已认证房主</span>
            </div>
          </div>
        </div>
        <div class="faxiaoxi">发消息</div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
<div class="newzixun">
  <h4>猜你喜欢</h4>
  <ul>
    <li v-for="item in getnewslist" :key="item.id">
      <div class="new_zx_text">
        <div class="img_box">
           <img :src="'http://124.223.73.204:8080'+item.imgSrc" alt="">
           </div>
        <div class="theme_text">
          <h5>{{item.title}}</h5>
          <div class="small_theme">
            <span>{{item.from}}</span>
            <span>{{item.date}}</span>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
    <!-- 底部卡片 -->
    <div>
      <van-goods-action>
        <van-goods-action-icon icon="star-o" text="收藏" />
        <van-goods-action-icon icon="phone-circle-o" text="在线咨询" />
        <van-goods-action-button
          color="linear-gradient(to right, #f36273, #fdb078)"
          type="danger"
          text="电话预约"
        />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
// import { getNews } from '@/api/home'
export default {
  data () {
    return {
      getnewslist: [] // 猜你喜欢
    }
  },
  methods: {
    // 最新资讯
    // async getNews () {
    //   const res = await getNews()
    //   console.log(res)
    //   this.getnewslist = res.data.body
    // }
  },
  created () {
    this.getNews()
  }
}
</script>

<style scoped lang='less'>
.bigbox {
  height: 1470px;
  background-color: rgb(246, 245, 246);
}
//轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  height: 252px;
  text-align: center;
  background-color: #39a9ed;
}
//顶部导航
.dingnav {
  position: absolute;
  width: 375px;
  height: 50px;
  //  background-color: pink;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  p {
    margin: 0px !important;
    color: white;
  }
  a {
    margin: 0 15px;
    color: white;
  }
}
.swipebox {
  position: relative;
}
//房屋信息
.fangwuxinxi {
  width: 375px;
  height: 242px;
  background-color: white;
  ul {
    width: 375px;
    li {
      width: 375px;
      .fistbox {
        width: 345px;
        // background-color: pink;
        margin-left: 15px;
        border-bottom: 1px solid #e8e8e8;
        padding: 10px 0;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        h4 {
          font-weight: 400;
          margin: 0px !important;
          color: rgb(51, 51, 62);
        }
        .spanbox {
          font-size: 12px;
          width: 50px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: rgb(59, 199, 218);
          background-color: rgb(225, 245, 248);
        }
      }
      .twobox {
        width: 345px;
        // background-color: pink;
        margin-left: 15px;
        height: 60px;
        padding: 10px 0;
        border-bottom: 1px solid #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .rent {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .threeth {
            display: flex;
            align-items: flex-end;

            h3 {
              margin: 0px !important;
              color: rgb(250, 87, 65);
            }
            span {
              font-size: 12px;
              color: rgb(250, 87, 65);
              margin-bottom: 3px;
            }
          }
          p {
            font-size: 12px;
            color: #b0b0b0;
            margin: 0px !important;
          }
        }

        .housetype {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .threeshi {
            display: flex;
            h3 {
              margin: 0px !important;
              color: rgb(250, 87, 65);
            }
          }
          p {
            font-size: 12px;
            color: #b0b0b0;
            margin: 0px !important;
          }
        }

        .area {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          .meter {
            display: flex;
            h3 {
              margin: 0px !important;
              color: rgb(250, 87, 65);
            }
          }
          p {
            font-size: 12px;
            color: #b0b0b0;
            margin: 0px !important;
          }
        }
      }
      .threebox {
        width: 345px;
        // background-color: pink;
        margin-left: 15px;
        height: 60px;
        padding: 10px 0;
        // border-bottom: 1px solid #e8e8e8;
        display: flex;
        .leftbox {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-around;
          .one_top {
            display: flex;
            span {
              font-size: 14px;
              color: #979797;
            }
            p {
              margin: 0px !important;
              font-size: 14px;
              color: rgb(51, 51, 62);
            }
          }
          .one_bottom {
            display: flex;
            span {
              font-size: 14px;
              color: #979797;
            }
            p {
              margin: 0px !important;
              font-size: 14px;
              color: rgb(51, 51, 62);
            }
          }
        }
        .rightbox {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-around;
          .two_top {
            display: flex;
            span {
              font-size: 14px;
              color: #979797;
            }
            p {
              margin: 0px !important;
              font-size: 14px;
              color: rgb(51, 51, 62);
            }
          }
          .two_bottom {
            display: flex;
            span {
              font-size: 14px;
              color: #979797;
            }
            p {
              margin: 0px !important;
              font-size: 14px;
              color: rgb(51, 51, 62);
            }
          }
        }
      }
    }
  }
}
//地图消息
.mapbox {
  width: 375px;
  height: 200px;
  background-color: white;
  margin-top: 10px;
  .top_homes {
    margin-left: 15px;
    height: 40px;
    span {
      font-size: 14px;
      line-height: 40px;
    }
  }
  .bottom_map {
    width: 375px;
    height: 160px;
    background-color: skyblue;
  }
}
//房屋配套
.setup {
  width: 375px;
  height: 191px;
  background-color: white;
  margin-bottom: 10px;
  .h4_box {
    width: 345px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e8e8e8;
    margin-left: 15px;
    h4 {
      margin: 0px !important;
      color: rgb(51, 51, 62);
    }
  }
  .li_box {
    ul {
      width: 375px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 75px;
        height: 75px;
        // background-color: pink;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        span {
          font-size: 14px;
          color: rgb(99, 99, 99);
        }
      }
    }
  }
}
.survey {
  width: 375px;
  height: 140px;
  background-color: white;
   margin-bottom: 10px;
  .h4_box {
    width: 345px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e8e8e8;
    margin-left: 15px;
    h4 {
      margin: 0px !important;
      color: rgb(51, 51, 62);
    }
  }
}
//房源概况
.wangbox {
    width: 345px;
    margin-left: 15px;
    margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .nvshi {
    display: flex;
    align-items: center;
    .imgbox {
      img {
        width: 60px;
        height: 60px;
        background-color: pink;
        border-radius: 50%;
      }
    }
    .nvb {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      .span_text_one {
        font-size: 14px;
        margin-bottom: 5px;
      }
      .span_text {
        font-size: 12px;
        color: #f36273;
        margin-left: 3px;
      }
    }
  }
  .faxiaoxi {
    width: 73px;
    height: 28px;
    border-radius: 3px;
    border: 1px solid #fdb078;
    color: #fdb078;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
  }
}
 //最新资讯
 .newzixun{
      width: 100%;
      background-color: white;
      display: flex;
      flex-direction: column;
    //   margin-bottom: 60px;
      h4{
        margin: 20px 0px !important;
        margin-left: 20px !important;
         color: rgb(51, 51, 62);
      }
      li{
        width: 375x;
        height:  108px;
        padding: 0px 20px;
        // background-color: pink;
        .new_zx_text{
          display: flex;
          border-bottom: 1px solid #dedede;
         padding-bottom: 15px;
          .img_box{
             width: 110px;
            height: 80px;
            img{
            width: 110px;
            height: 80px;
            background-color: rgb(238, 238, 238);
          }
            }
          .theme_text{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            h5{
              margin: 0px !important;
               color: rgb(51, 51, 62);
            }
            .small_theme{
              display: flex;
              justify-content: space-between;
              span{
                font-size: 12px;
                color: #bbbbbb;
              }
            }
          }
        }
      }
    }
</style>
